 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNum"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.username" placeholder="请输入账号"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search.name" placeholder="请输入昵称"></el-input>
                </el-col>
                <el-col :span="6"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <!-- <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button> -->
                    </div>
                </el-col>
                <el-col :span="4">
                    <!-- <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button> -->
                    <!-- <el-button size="medium" type="success" @click="exportBtn" icon="el-icon-download">导出</el-button> -->
                    <el-upload class="upload-demo" :action="url" style="width: 5px ;margin-top: 0px;margin-left: 30px">
                    <el-button size="large" type="primary">导入</el-button>
                    </el-upload>
                </el-col>
            </el-form>

            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column width="90px" prop="username" label="账号"> </el-table-column>
                <!-- <el-table-column prop="password" label="密码"> </el-table-column> -->
                <el-table-column prop="name" label="昵称"> </el-table-column>
                <!-- <el-table-column prop="headPic" label="头像"> </el-table-column> -->
                <el-table-column label="头像"  prop="headPic" > 
                    <template  slot-scope="scope">
                            <el-image
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.headPic"
                                     ></el-image>
                        </template> 
                </el-table-column>
                <el-table-column prop="sex" :formatter="getSexName" label="性别"> </el-table-column>
                <el-table-column prop="phoneNum" label="手机号"> </el-table-column>
                <el-table-column prop="accountBalance" label="账户余额" sortable=""> </el-table-column>
                <el-table-column prop="integration" label="积分" sortable=""> </el-table-column>
                <el-table-column prop="growth" label="成长值" sortable=""> </el-table-column>
                <el-table-column prop="historyIntegration" label="历史积分数量" sortable=""> </el-table-column>
                <el-table-column prop="levelName" label="会员级别"> </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column width="120px" prop="email" label="邮箱"> </el-table-column>
                <!-- <el-table-column prop="pathFront" label="正面证件照"> </el-table-column> -->
                <el-table-column label="正面证件照"  prop="pathFront" > 
                    <template  slot-scope="scope">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.pathFront"
                                ></el-image>
                    </template> 
                </el-table-column>
                <!-- <el-table-column prop="pathReverse" label="反面证件照"> </el-table-column> -->
                <el-table-column label="反面证件照"  prop="pathReverse" > 
                    <template  slot-scope="scope">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.pathReverse"
                                ></el-image>
                    </template> 
                </el-table-column>
                <el-table-column prop="licenseNo" label="驾照号"> </el-table-column>
                <el-table-column prop="token" label="token值"> </el-table-column>
                <el-table-column prop="status" label="状态" :formatter="getStatusName"></el-table-column>
                <el-table-column label="操作" width="300px">
                    <template slot-scope="scope">
                      <el-button size="small" @click="updateRole(scope.$index, scope.row)" icon="el-icon-edit" type="success">编辑</el-button>
                      <!-- <el-button size="small" @click="deleteRole(scope.$index, scope.row)" icon="el-icon-delete" type="danger">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[1, 2, 3, 5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
            
            <!--修改 Form -->
            <el-dialog title="会员管理" :visible.sync="editRoleState">
                <el-form :model="form">
                    <el-form-item label="账号" :label-width="formLabelWidth">
                        <el-input v-model="form.username"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="form.name"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio v-model="form.status" :label="0">启动</el-radio>
                        <el-radio v-model="form.status" :label="1">禁用</el-radio>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editRoleState = false">取 消</el-button>
                    <el-button type="primary" @click="saveRole">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>

export default {
    data() {
        return {
            url:this.$base_url+"/api/mbs/member/importExcel?accessToken="+localStorage.getItem("token"),
            tableData: [],
            page: {},
            form: { status: '0' },
            search: { pageNum: 1, pageSize: 5 },
            formLabelWidth: '80px',
            editRoleState: false,
            imageUrl:''
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http.post('/api/mbs/member/queryAll?pageNo='+this.search.pageNum+'&pageSize='+this.search.pageSize, {
                        username: this.search.username,
                        name: this.search.name
                })
                .then((response) => {
                    console.log(response.data);
                    _this.tableData = response.data.data.list;
                    _this.page = response.data.data;
                    _this.total = response.data.data.total;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.search = {};
            this.search.pageNum = 1;
            this.search.pageSize = 5;
            this.load();
        },
        getStatusName(row, column, cellValue) {
            return cellValue == 0 ? '启动' : '禁用';
        },
        updateRole: function (index, row) {
            this.form = row;
            this.editRoleState = true;
        },
        // deleteRole: function (index, row) {
        //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     })
        //         .then(() => {
        //             var _this = this;
        //             axios
        //                 .delete('http://localhost:12130/api/mbs/member/deleteById?id=' + row.id)
        //                 .then(function (response) {
        //                     console.log(response);
        //                     if (response.status == 200) {
        //                         if (response.data.code == 2000) {
        //                             //提示删除成功
        //                             _this.$message({
        //                                message: response.data.message,
        //                                type: 'success'
        //                             });
        //                             //重新加载数据
        //                             _this.load();
        //                         }
        //                     }
        //                 })
        //                 .catch(function (error) {
        //                     console.log(error);
        //                     _this.$message.error('你错了。。。');
        //                 });
        //         })
        //         .catch(() => {
        //             this.$message({
        //                 type: 'info',
        //                 message: '已取消删除'
        //             });
        //         });
        // },
        saveRole() {
            var _this = this;
            if (this.form.id != null && this.form.id != '' && this.form.id != undefined) {
                this.$http
                    .put('/api/mbs/member/update', this.form)
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data.code==2000){
                          //关闭弹出框
                          _this.editRoleState = false;
                           //提示更新成功
                                _this.$message({
                                    //message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success' 
                                });
                                //重新加载数据
                                _this.load();
                        }else{
                           _this.$message.error(response.data.message);
                        }
                        
                    })
                    .catch(function (error) {
                        _this.$message.error('错了哦，这是一条错误消息');
                        _this.editRoleState = false;

                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            }
        },
        //用户性别
        getSexName(row, column, cellValue) {
        return cellValue == 0 ? '男' : cellValue == 1 ? '女' : '未知';
        },
        importBtn() {
            var _this = this;
            this.$http
                .post('/api/mbs/member/importExcel')
                .then(function (response) {
                    _this.$message.success('导入成功！');
                    _this.load();
                })
                .catch(function (error) {
                    _this.$message.error('导入失败！');
                    console.log(error);
                });
        },
        exportBtn() {
            var _this = this;
            this.$http.get('/api/mbs/member/exportExcel')
            .then(function (response) {
                    _this.$message.success('导出成功！');
                    _this.load();
                })
                .catch(function (error) {
                    _this.$message.error('导出失败！');
                    console.log(error);
                });
            
        },
        //图片上传成功后
                 handleAvatarSuccess:function(res, file) {
                     //图片回显
                     this.imageUrl = URL.createObjectURL(file.raw);
                  //   alert(file.response);
                    // alert(JSON.stringify(file.response));
                     this.form.avatar=file.response.ossFileUrlBoot;
                     // this.form.fileName=file.response.oldFileName;
                     // this.form.filePath=file.response.newFilePath;
                 },
                 //上传前图片类型和大小判断
                 beforeAvatarUpload:function(file) {
                     // const isJPG = file.type === 'image/jpeg';
                     const isLt2M = file.size / 1024 / 1024 < 2;

                     /* if (!isJPG) {
                          this.$message.error('上传头像图片只能是 JPG 格式!');
                      }*/
                     if (!isLt2M) {
                         this.$message.error('上传头像图片大小不能超过 2MB!');
                     }
                     return  isLt2M;
                 }
    }
};
</script>
<style>
.el-upload {
    width: 62px;
    height: 33px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
}
</style>